<template>
    <div>
        <el-card class="box-card">
            <el-form label-width='70px' label-position="top">
                <el-row>
                    <el-col :span='5'>
                        <el-form-item  label='标签名称'>
                            <el-input clearable v-model="queryInfo.tags" size='mini' style="width:90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='4'>
                        <el-form-item  label='省'>
                            <el-select clearable @change='getCitys(1)' v-model="queryInfo.province" size='mini' style="width:90%">
                            <el-option v-for='item in Provinceslist' :key='item' :value='item' :label='item'></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span='4'>
                        <el-form-item  label='市'>
                            <el-select clearable v-model="queryInfo.city" size='mini' style="width:90%">
                                <el-option v-for='item in Cityslist' :key='item' :label='item' :value='item'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span='5'>
                        <el-form-item  label='企业简称'>
                            <el-input clearable v-model="queryInfo.shortName"  size='mini' style="width:90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='4'>
                        <el-form-item  label='状态'>
                            <el-select clearable v-model="queryInfo.state"  size='mini' style="width:90%">
                            <el-option label='启用' value='1'></el-option>
                            <el-option label='禁用' value='0'></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span='2'>
                        <el-form-item label-width='40px' label='操作'>
                            <el-button size='mini' @click='queryListBtn' icon="el-icon-search" type="primary">搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset='22'>
                        <el-button size='mini' @click='addUser' type="primary" icon="el-icon-edit">新增用户</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-alert :title="title" type="info" show-icon :closable="false">
            </el-alert>

            <el-table :data='ListData' style="width: 100%;margin-top:5px" stripe border fit>
                <el-table-column align='center' prop="id" label="序号"> </el-table-column>
                <el-table-column align='center' prop="number" label="企业编号"> </el-table-column>
                <el-table-column align='center' prop="shortName" label="企业简称"> </el-table-column>
                <el-table-column align='center' prop="tags" label="标签"> </el-table-column>
                <el-table-column align='center' prop="creatorID" label="创建者"> </el-table-column>
                <el-table-column align='center' prop="addDate" label="创建日期"> </el-table-column>
                <el-table-column align='center' prop="remarks" label="备注"> </el-table-column>
                <el-table-column align='center'  prop="state" label="状态">  
                  <template slot-scope="scope">
                    <span v-if="scope.row.state == 0">禁用</span>
                    <span v-else>启用</span>
                  </template>
</el-table-column>
<el-table-column align='center' label="操作" width="210px">
    <template slot-scope="scope">
                      <el-button size="mini" type="primary" @click='editBtn(scope.row)'>编辑</el-button>
                        <el-button  size="mini" type="primary" v-show='scope.row.state == 0'  @click='changeButton(scope.row)'>启用 </el-button>
                        <el-button  size="mini" type="primary" v-show='scope.row.state == 1' @click='changeButton(scope.row)' >禁用</el-button>
                        <el-button size="mini" type="danger" @click='deleteBtn(scope.row)' >删除</el-button>
                      </template>
</el-table-column>
</el-table>

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[5, 10, 30]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>


<el-dialog title="创建用户" :visible.sync="dialogVisible" width="50%">

    <el-form label-width='120px' :model='addListInfo' :rules='addListInfoRules' ref='addListInfoRef'>
        <el-row>
            <el-col>
                <el-form-item label='企业名称' prop='shortName'>
                    <el-input v-model="addListInfo.shortName" size='mini' style="width:90%"></el-input>
                    <el-checkbox v-model="addListInfo.isFamous">是否为名企</el-checkbox>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <el-form-item label='所属公司'>
                    <el-input v-model="addListInfo.company" size='mini' style="width:90%"></el-input>
                    <div>http://www.tianyancha.com (在此可查询所属公司全称及简称)</div>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <el-form-item label='城市' prop='province'>
                    <el-select style="width:45%" size='mini' v-model="addListInfo.province" @change='getCitys(2)'>
                        <el-option v-for='item in Provinceslist' :key='item' :value='item' :label='item'></el-option>
                    </el-select>
                    <el-select style="width:45%" size='mini' v-model="addListInfo.city">
                        <el-option v-for='item in Cityslist' :label='item' :value='item' :key='item'></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <el-form-item label='方向(企业标签)' prop='tags'>
                    <el-input v-model="addListInfo.tags" size='mini' style="width:90%"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <el-form-item label='备注'>
                    <el-input v-model="addListInfo.remarks" size='mini' style="width:90%"></el-input>
                </el-form-item>
            </el-col>
        </el-row>


    </el-form>

    <span slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addFormListBtn">确 定</el-button>
  </span>
</el-dialog>

</el-card>

</div>
</template>

<script>
    import {
        list,
        add,
        update,
        remove,
        disabled,
    } from "@/api/hmmm/companys.js";
    import {
        provinces,
        citys
    } from "@/api/hmmm/citys.js";
    export default {
        data() {
            return {
                //显示总条数
                title: '',
                total: 0,
                //搜索入参
                queryInfo: {
                    page: 1,
                    pagesize: 10,
                    tags: '',
                    province: '',
                    city: '',
                    shortName: '',
                    state: ''
                },
                //数据
                ListData: [],
                //省市列表
                Provinceslist: [],
                Cityslist: [],
                dialogVisible: false,
                // 编辑 新增入参
                addListInfo: {
                    isFamous: false,
                    shortName: '',
                    company: '',
                    province: '',
                    city: '',
                    tags: '',
                    remarks: ''
                },
                //验证规则
                addListInfoRules: {
                    shortName: [{
                        required: true,
                        message: '企业名称不能为空',
                        trigger: 'blur'
                    }],
                    province: [{
                        required: true,
                        message: '城市选项不能为空',
                        trigger: 'bulr'
                    }],
                    tags: [{
                        required: true,
                        message: '方向(企业标签)不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            //查询列表
            this.queryListBtn()
                //查询省市
            this.getProvinces()
        },
        methods: {

            // 分页
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.handleCurrentChange(1)
            },
            handleCurrentChange(newPage) {
                this.queryInfo.page = newPage
                if (!this.queryInfo.tags) {
                    delete this.queryInfo.tags
                }
                if (!this.queryInfo.province) {
                    delete this.queryInfo.province
                }
                if (!this.queryInfo.city) {
                    delete this.queryInfo.city
                }
                if (!this.queryInfo.shortName) {
                    delete this.queryInfo.shortName
                }
                if (!this.queryInfo.state) {
                    delete this.queryInfo.state
                }

                const params = {
                    ...this.queryInfo
                }

                list(params).then(res => {
                    if (res.status != 200) return this.$message.warning(res.msg || '获取列表失败！')
                    this.ListData = res.data.items
                    this.total = res.data.counts
                    this.title = `总页数为${this.total}条`
                })
            },

            // 获取省市联动
            async getProvinces() {
                try {
                    const res = await provinces();
                    this.Provinceslist = res;
                } catch (err) {
                    this.$toast("获取地区数据失败");
                }
            },
            async getCitys(e) {
                let Province = ''
                console.log(e);
                if (e == 1) {
                    Province = this.queryInfo.province
                } else if (e == 2) {
                    Province = this.addListInfo.province
                    this.addListInfo.city = ""
                }
                try {
                    const res = await citys(Province);
                    this.Cityslist = res;
                } catch (err) {
                    this.$toast("获取地区数据失败");
                }
            },

            // 查询按钮
            queryListBtn() {
                this.handleCurrentChange(1)
            },

            addUser() {
                this.addListInfo = {
                    isFamous: false,
                    shortName: '',
                    company: '',
                    province: '',
                    city: '',
                    tags: '',
                    remarks: ''
                }
                this.dialogVisible = true
            },

            // 添加数据
            async addFormListBtn() {
                this.$refs.addListInfoRef.validate(valid => {
                    if (!valid) return
                    const params = {
                        ...this.addListInfo
                    }

                    add(params).then(res => {
                        if (res.status != 200) return this.$message.error(res.msg || '新增数据失败！')

                        this.dialogVisible = false
                        this.$message.success('新增数据成功！')
                        this.handleCurrentChange(1)
                    })
                })
            },

            // 删除
            deleteBtn(data) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    try {
                        // const res = await remove(data);
                        remove(data).then(res => {
                            if (res.status != 200) return this.$message.error(res.msg || '删除失败！')
                            this.handleCurrentChange(1)
                        })

                    } catch {}
                }).catch(() => {
                    this.$message.info('已取消删除！')
                });
            },

            // 切换状态
            changeButton(data) {
                let changeSate = ''
                if (data.state == 1) {
                    changeSate = '禁用'
                    data.state = 0
                } else {
                    changeSate = '启用'
                    data.state = 1
                }

                this.$confirm(`是否${changeSate}该数据?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    disabled(data).then(res => {
                        if (res.status != 200) return this.$message.error(res.msg || `数据${changeSate}失败`)

                        this.$message.success('数据状态切换成功!')
                        this.handleCurrentChange(1)
                    })

                }).catch(() => {
                    this.$message.info(`已取消${changeSate}该数据`)
                });


            },

            // 编辑数据
            editBtn(e) {
                console.log(e)
                this.dialogVisible = true
                this.addListInfo = {
                    isFamous: e.isFamous == 1 ? true : false,
                    shortName: e.shortName,
                    company: e.company,
                    province: e.province,
                    city: e.city,
                    tags: e.tags,
                    remarks: e.remarks
                }
                
            }
        }
    }
</script>

<style lang='less' scoped></style>